<template>
  <div class="table">
    <el-table :data="rows"
              @sort-change="sortChange"
              @filter-change="filterChange"
              stripe
              style="width: 100%"
              size="small"
              :highlight-current-row="true">
      <el-table-column prop="title"
                       label="标题"
                       align="center">
      </el-table-column>
      <el-table-column prop="status"
                       column-key="status"
                       label="状态"
                       align="center"
                       :filters="status"
                       filter-placement="bottom">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{scope.row.status | getStatus}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column sortable='custom'
                       prop="create_time"
                       label="创建时间"
                       width="400"
                       align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          {{scope.row.create_time | dateFormate}}
        </template>
      </el-table-column>
      <el-table-column sortable='custom'
                       prop="update_time"
                       label="更新时间"
                       width="400"
                       align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          {{scope.row.update_time | dateFormate}}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="220px">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="primary"
                     @click="edit(scope.row.id)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { ATRCILE_STATUS } from "@/static/status";
const type = {
  1: "primary",
  2: "danger",
  3: "warning"
};
export default {
  props: {
    rows: Array,
    pageOpts: Object
  },
  data() {
    return {
      dialogFormVisible: true
    };
  },
  methods: {
    del(id) {
      this.$emit("del", id);
    },
    getStatusType(status) {
      return type[status];
    },
    sortChange({ column, prop, order }) {
      if (!prop) return;
      this.pageOpts.sort[prop] = order;
      this.$emit("table-change", this.pageOpts);
    },
    filterChange({ status }) {
      const pageOpts = { ...this.pageOpts, status };
      this.$emit("table-change", pageOpts);
    },
    edit(id) {
      this.$router.push({
        name: "editAtrticle",
        query: { id }
      });
    }
  },
  filters: {
    getStatus(status) {
      return ATRCILE_STATUS[status];
    }
  },
  computed: {
    status() {
      const arr = [];
      for (const item in ATRCILE_STATUS) {
        arr.push({
          text: ATRCILE_STATUS[item],
          value: item
        });
      }
      return arr;
    }
  }
};
</script>
<style lang="scss" scoped>
.table {
  padding: 15px;
}
</style>
